<template>
  <div class="message-info">
    <div class="info-row">
      <span class="label">通知类型:</span>
      <span class="content">{{
        msgInfo.type === MsgTypeEnum.HOMEWORK ? '作业通知' : '班级通知'
      }}</span>
    </div>
    <div class="info-row" v-if="msgInfo.type === MsgTypeEnum.HOMEWORK">
      <span class="label">科目:</span>
      <span class="content">{{ subjectMap[msgInfo.subject] }}</span>
    </div>
    <div class="info-row">
      <span class="label">发布时间:</span>
      <span class="content">{{
        dayjs(msgInfo.notify_time).format('YYYY-MM-DD HH:mm:ss')
      }}</span>
    </div>
    <div class="info-row">
      <span class="label">发布对象:</span>
      <span class="content">{{ receiver }}</span>
    </div>
    <div class="info-row">
      <span class="label">通知标题:</span>
      <span class="content">{{ msgInfo.title }}</span>
    </div>
    <div class="info-row">
      <span class="label">通知内容:</span>
      <span class="content">{{ msgInfo.content }}</span>
    </div>
    <div class="annex-wrapper">
      <div
        class="annex-item"
        v-for="(annex, index) in msgInfo.attachment_url"
        :key="index"
        @click="previewFile(annex.url)"
      >
        <img class="annex-icon" :src="getFileImg(annex.name)" />
        <div class="annex-name">{{ annex.name }}</div>
      </div>
    </div>
  </div>
  <PreviewPopup
    v-if="previewVisible"
    @close="previewVisible = false"
    :fileUrl="fileUrl"
  />
</template>

<script setup>
import PreviewPopup from '@/components/preview/PreviewPopup.vue'
import { ref, computed } from 'vue'
import dayjs from 'dayjs'
import { getFileImg } from '@/utils'
import { subjectMap } from '@/constants'
import { MsgTypeEnum, MsgReceiverEnum } from '../constant'

const props = defineProps({
  msgInfo: {
    type: Object,
    default: () => ({})
  }
})

const receiver = computed(() => {
  const { target_type, target_info, class_info } = props.msgInfo
  return target_type === MsgReceiverEnum.STUDENTS
    ? `${target_info.target_name}等${target_info.target_count}人`
    : class_info?.map(item => item.class_name).join(' ')
})

const previewVisible = ref(false)
const fileUrl = ref('')
const previewFile = url => {
  fileUrl.value = url
  previewVisible.value = true
}
</script>

<style lang="less" scoped>
.message-info {
  box-sizing: border-box;
  overflow: auto;
  width: 100%;
  height: calc(100% - 68px);
  padding: 26px;
  font-size: 16px;
  color: #040b1a;
  border-radius: 8px;
  background-color: #fff;
  .info-row {
    font-weight: bold;
    margin-bottom: 30px;
    .label {
      width: 83px;
      margin-right: 16px;
      white-space: nowrap;
    }
    .content {
      overflow-wrap: break-word;
      color: rgba(4, 11, 26, 0.5);
    }
  }
  .annex-wrapper {
    display: flex;
    gap: 30px;
    // margin-left: 83px;
    .annex-item {
      width: 88px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      .annex-icon {
        width: 44px;
        margin-bottom: 10px;
      }
      .annex-name {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
        color: rgba(4, 11, 26, 0.5);
      }
    }
  }
}
</style>
